<template>
	<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" 
	:style="{justifyContent:justifyContent}" 
	@tap.stop="changeStatus">
		<view v-if="status" 
		:style="{
			width:(size)+'rpx', height:(size)+'rpx', overflow:'hidden', 
			backgroundColor:checkedColor, borderRadius:'80rpx'}">
			<text class="gui-radio-btn gui-icons gui-block-text gui-text-center"
			:style="{fontSize:(size-12)+'rpx', lineHeight:(size)+'rpx', color : '#FFFFFF'}">&#xe60f;</text>
		</view>
		<text v-else 
		class="gui-radio-btn gui-icons gui-block-text gui-text-center" 
		:style="{
			fontSize:size+'rpx', 
			lineHeight:(size+5)+'rpx', 
			color : color
		}">&#xe762;</text>
		<view class="gui-radio-lable"><slot></slot></view>
	</view>
</template>
<script>
export default {
	props: {
		size : {
			type : Number,
			default : 38
		},
		color : {
			type : String,
			default : '#EEEEEE'
		},
		checked : {
			type : Boolean,
			default : false
		},
		checkedColor : {
			type : String,
			default : '#008AFF'
		},
		parameter : {
			type : Array,
			default : function () {
				return []
			}
		},
		justifyContent:{type:String, default:'flex-start'}
	},
	data() {
		return {
			status : false
		}
	},
	watch: {
		checked : function (val, old) {
			this.status = val;
		}
	},
	created : function(){
		this.status = this.checked;
	},
	methods:{
		changeStatus : function(){
			this.status = !this.status;
			this.$emit('change', [this.status, this.parameter]);
		}
	}
}
</script>
<style scoped>
.gui-radio-btn{color:#999999;}
.gui-radio-lable{margin-left:15rpx;}
</style>